/**
 * Created by widthdrawnm on 16/9/16.
 */
import React, { Component } from 'react';
require("./css/Slidenavigation.css");
import Link from 'react-router/lib/Link';

export default class SlideNavigation extends Component {
    constructor(props) {
        super(props);
    }

    shouldComponentUpdate(nextProps, nextState) {
        //console.log(this.props,"slideNavi shold update?",nextProps,nextState);
        if(this.props.cates.cates_1.length==0){
            console.log('cate update')
            return true;
        }
        else
            return false;
    }
    componentDidMount(){
    }

    //提醒箭头
    getNotifyArrow(len){
        //console.log(len);
        //if(len>4){
        //    return (<div style={{zIndex:"9999",position:"absolute",right:"0",fontSize:"10px",textAlign:"right",lineHeight:"13px"}}>
        //        <div style={{width:"58px",height:"20px",backgroundImage: "url(public/img/index_sprite.png)",backgroundSize:"100%",backgroundPosition:"0 -111px",backgroundRepeat:"no-repeat"  }}></div>
        //        左滑<br/>更多</div>);
        //}
        return ;
    }

    render(){
        //总显示宽度
        var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var singleWidth=width/4;
        var ul_1_len=singleWidth*this.props.cates.cates_1.length;
        let cateArr_1=[];

        var front_domain=document.location.protocol+"//"+window.location.host;

        return (
            <div style={{backgroundColor:"white"}} id="SlideNavi">
                <div className="nav">

                    <ul style={{width:ul_1_len+"px"}}>
                        {
                            this.props.cates.cates_1.map((data,index)=>{
                                return (
                                    <Link to={{ pathname: '/cate', query:{cate_id:data.citizencard_cateid } }}  key={"cate1"+index}>
                                    <li className="navChild" style={{width:singleWidth+"px"}}>
                                        <div className="navImg" style={{backgroundImage:"url("+data.citizencard_catelogo+")"}}>
                                        </div>
                                        <div className="navTxt">{data.citizencard_catename}</div>
                                    </li>
                                    </Link>
                                )
                            })
                        }
                        {this.getNotifyArrow(this.props.cates.cates_1.length)}
                    </ul>

                </div>
                <div className="nav">
                <ul>
                    <a href={"http://o2o.96225.com?department_id=0#forceupdate"}>
                        <li className="navChild" style={{width:singleWidth+"px"}}>
                            <div className="navImg" style={{backgroundImage:"url('http://o2o.96225.com/city/Uploads/banner/20161013/a3cc9d526a66c3097f80041299701b61.png')"}}>
                            </div>
                            <div className="navTxt">首页</div>
                        </li>
                    </a>
                    {/*<a href={"/gifts"} >
                        <li className="navChild" style={{width:singleWidth+"px"}}>
                            <div className="navImg" style={{backgroundImage:"url('http://o2o.96225.com/city/Uploads/banner/20161013/a3cc9d526a66c3097f80041299701b61.png')"}}>
                            </div>
                            <div className="navTxt">新人大礼包</div>
                        </li>
                    </a>*/}
                    {
                        this.props.cates.cates_2.map((data,index)=>{
                            var url=document.location.protocol+"//"+window.location.host+"/?department_id="+data.department_id+"#forceupdate";
                            return (
                                <a href={url}  key={"cate2"+index}>
                                <li className="navChild" style={{width:singleWidth+"px"}}>
                                    <div className="navImg" style={{backgroundImage:"url("+data.citizencard_catelogo+")"}}>
                                    </div>
                                    <div className="navTxt">{data.citizencard_catename}</div>
                                </li>
                                </a>
                            )
                        })
                    }
                </ul>
                </div>
            </div>
        );
    }
}

SlideNavigation.defaultProps = {
    cates:{cates_1:[],cates_2:[]}
}

SlideNavigation.propTypes = {

}
